{layout name="layout" /}

<div class="Hui-article">
	<article class="cl pd-20" style="min-width: 800px; max-width: 80%;">
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="l">
				<a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
					<i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
				<a class="btn btn-primary radius" href="{:url('/permission/add')}">
					<i class="Hui-iconfont">&#xe600;</i> 添加权限</a>
			</span>
			<span class="r">共有数据：
				<strong id="counts">-</strong> 条</span>
		</div>
		<div class="mt-10">
			<table class="table table-border table-bordered table-hover table-bg">
				<thead>
					<tr>
						<th scope="col" colspan="7">权限列表</th>
					</tr>
					<tr class="text-c">
						<th width="25px">
							<input type="checkbox" value="" name="">
						</th>
						<th width="60px">ID</th>
						<th width="160px">权限名称</th>
						<th width="120px">控制器或方法(小写) or 图标</th>
						<th width="160px">备注</th>
						<th width="160px">操作</th>
					</tr>
				</thead>
				<tbody>
					{foreach $data as $value}
					<tr class="text-c">
						<td>
							<input type="checkbox" value="{$value.id}" name="checkbox[]">
						</td>
						<td>
							<a href="javascript:void(0);" class="permission" data-status="0">
								<i class="icon Hui-iconfont">&#xe610;</i>
								<span>{$value.id}</span>
							</a>
						</td>
						<td>{$value.name}</td>
						<td>
							<i class="Hui-iconfont">{$value.method}</i>
						</td>
						<td>{$value.note}</td>
						<td class="f-14">
							<a title="编辑" href="{:url('/permission/edit','id='.$value.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$value.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{notempty name="value.child"} {foreach $value.child as $val}
					<tr class="text-c son_{$value.id}" style="display: none;">
						<td>
							<input type="checkbox" value="{$val.id}" name="checkbox[]">
						</td>
						<td>
							<a href="javascript:void(0);" class="permission" data-status="0" style="text-decoration:none; margin-left:20px">
								<i class="icon Hui-iconfont">&#xe610;</i>
								<span>{$val.id}</span>
							</a>
						</td>
						<td>{$val.name}</td>
						<td>{$val.method}</td>
						<td>{$val.note}</td>
						<td class="f-14">
							<a title="编辑" href="{:url('/permission/edit','id='.$val.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$val.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{notempty name="val.child"} {foreach $val.child as $vo}
					<tr class="text-c son_{$val.id} grandson_{$value.id}" style="display: none;">
						<td>
							<input type="checkbox" value="{$vo.id}" name="checkbox[]">
						</td>
						<td>
							<span style="margin-left:20px">{$vo.id}</span>
						</td>
						<td>{$vo.name}</td>
						<td>{$vo.method}</td>
						<td>{$vo.note}</td>
						<td class="f-14">
							<a title="编辑" href="{:url('/permission/edit','id='.$vo.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$vo.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{/foreach} {/notempty} {/foreach} {/notempty} {/foreach}
				</tbody>
			</table>
		</div>
	</article>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
	/*计算栏目条数*/
	var count_tr = $('tr').length;
	// console.log(count_tr);

	$("#counts").html(count_tr - 1);


	$(".permission").click(function () {
		var id = $(this).children('span').text().trim();
		var status = $(this).data('status');
		// console.log(id);
		// console.log(status);
		// return false;
		if (status == 1) {
			$(".son_" + id).css('display', 'none');
			$(".grandson_" + id).css('display', 'none');
			$(this).children('i').html("&#xe610;");
			$(this).data('status', 0);
			$(".son_" + id).children('td').children('.permission').children('i').html("&#xe610;");
			$(".son_" + id).children('td').children('.permission').data('status', 0);
			return false;
		}
		$(".son_" + id).css('display', '');
		$(this).children('i').html("&#xe631;");
		$(this).data('status', 1);

		return false;
	});
</script>
<!--请在上方写此页面业务相关的脚本-->